<template>
  <div class="main-container color">
    <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
      <a-col :span="8" :offset="8">
        <a-form class="huakaClass" ref="cardRef" :model="cardForm" :auto-label-width="true">
          <a-form-item label="接口账号" hide-asterisk :content-flex="false" :merge-props="false">
            <a-input v-model="cardForm.id" placeholder="请输入接口账号" readonly>
              <template #append>
                <span class="copys" @click="useCommon.copy(cardForm.id)">复制</span>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="接口秘钥" hide-asterisk :content-flex="false" :merge-props="false">
            <a-input v-model="cardForm.key" readonly placeholder="请输入接口秘钥">
              <template #append>
                <span class="copys" style="margin-right: 10px" @click="keys">{{
                  cardForm.key == '暂未设置接口密钥' ? '设置' : '重置'
                }}</span>
                <span class="copys" @click="useCommon.copy(cardForm.key)">复制</span>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="接口地址" hide-asterisk :content-flex="false" :merge-props="false">
            <a-input v-model="cardForm.urls" readonly placeholder="请输入接口地址">
              <template #append>
                <span class="copys" @click="useCommon.copy(cardForm.urls)">复制</span>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="套餐编码" hide-asterisk :content-flex="false" :merge-props="false">
            <a-input v-model="cardForm.code" readonly placeholder="请输入套餐编码">
              <template #append>
                <span class="copys" @click="route">查看</span>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="接口文档" hide-asterisk :content-flex="false" :merge-props="false">
            <a-input v-model="cardForm.url" readonly placeholder="请输入接口文档">
              <template #append>
                <span class="copys" @click="useCommon.copy(cardForm.url)">复制</span>
              </template>
            </a-input>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
  import { find, key } from '@/api/user'
  import { get } from '@/api/http'
  import { onMounted, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { useRouter } from 'vue-router'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const cardForm: any = ref({
    id: '',
    key: '',
    passWord: '',
    code: '套餐列表页面第一列就是套餐编码',
    url: 'https://console-docs.apipost.cn/preview/a240bd8990b57e04/989cac2e089153b8',
    urls: window.location.protocol + '//' + window.location.host,
  })
  const router = useRouter()
  //获取
  const finds = () => {
    get({
      url: find,
    }).then((res) => {
      if (res.data.key) {
        cardForm.value.key = res.data.key
      } else {
        cardForm.value.key = '暂未设置接口密钥'
      }
      cardForm.value.id = res.data.id
    })
  }
  //获取key
  const keys = () => {
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确认',
      onOk: () => {
        get({
          url: key,
        }).then((res) => {
          finds()
          Message.success(res.msg)
        })
      },
    })
  }

  const route = () => {
    router
      .replace({
        path: '/children/meal/meallist',
      })
      .then(() => {})
  }

  onMounted(async () => {
    await finds()
  })
</script>

<style scoped>
  .copys {
    color: #3491fa;
    cursor: pointer;
  }
  .color {
    background-color: var(--color-bg-1);
    border-radius: 10px;
    padding: 20px;
  }
</style>
